<template>
	<view
		class="content relative text-hide overflow-hidden"
		:style="'padding-bottom:' + textHeight + 'px;' + (extraStyle || '')"
		:class="[extraClass || '']"
		@click="clickContent"
	>
		<view class="h-full overflow-hidden">
			<textarea
				class="text-title w-full"
				ref="textarea"
				:placeholder="placeholder"
				:maxlength="maxlength"
				v-model="inputContent"
				:auto-height="true"
				:placeholder-style="'color:' + SlStyle.disableColor"
				:focus="focusTextarea"
				@blur="blurTextarea"
				:disabled="disabled"
				style="min-height: 51px"
			/>
		</view>
		<view class="absolute bottom-text bottom-0 right-0 flex-center">
			<text class="color-main text-s"> {{ curLength }}/{{ maxlength }} </text>
		</view>
	</view>
</template>

<script>
import { ref, watch, getCurrentInstance, onMounted } from 'vue';
import SlStyle from '../../../style/style.js';
export default {
	props: {
		modelValue: String,
		placeholder: String,
		maxlength: {
			type: [Number, String],
			required: true,
		},
		extraClass: String,
		extraStyle: String,
		disabled: Boolean,
	},
	setup(props, ctx) {
		const { ctx: curCtx } = getCurrentInstance();
		const curLength = ref(0);
		const inputContent = ref('');
		watch(inputContent, (v) => {
			v = v || '';
			curLength.value = v.length;
			ctx.emit('change', v);
			ctx.emit('update:modelValue', v);
		});
		watch(
			() => props.modelValue,
			(v) => {
				inputContent.value = v;
			},
			{
				immediate: true,
			}
		);
		const focusTextarea = ref(false);
		const textHeight = ref(uni.upx2px(32));
		onMounted(() => {
			uni
				.createSelectorQuery()
				.in(curCtx)
				.select('.bottom-text')
				.boundingClientRect((data) => {
					textHeight.value = data.height || 15;
				})
				.exec();
		});
		return {
			curLength,
			inputContent,
			focusTextarea,
			SlStyle,
			blurTextarea() {
				focusTextarea.value = false;
			},
			clickContent() {
				focusTextarea.value = true;
			},
			setContent(v) {
				inputContent.value = v;
			},
			textHeight,
		};
	},
};
</script>
